<div>
<?php ?>
	<div class="form-group">
		<select id="espacio" class="form-control" name="espacio"></select> <br />
		<p style="display: inline" id="text"></p>
		<a id="btn-editar" class="btn btn-primary" href="#" >Editar</a>
		<a class="btn btn-success" href="<?php echo base_url('espacios/crear') ?>">Crear Nuevo</a>
		<a id="btn-borrar" class="btn btn-danger" href="#">Eliminar</a>
	</div>
	<div id="divmapa"></div> 
</div>

<script type="text/javascript">
	var espacios = [];
	var espacio_seleccionado = 0;
	
	$(document).ready(function() {
		var map = null;
		var marcador = null;
		
		var divmapa = document.getElementById('divmapa');
		var useragent = navigator.userAgent;
		var btn_editar =  $("#btn-editar");
		var btn_borrar =  $("#btn-borrar");
		
		if(useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1){
			divmapa.style.width = $(divmapa).innerWidth();
			divmapa.style.height = $(divmapa).innerHeight();
		}else{
			divmapa.style.width = "400px";
			divmapa.style.height = "400px";
		}
		
		$.getJSON("<?php echo base_url()?>restapi/espacio",
		function(data, textStatus, jqXHR){
			espacios = data;
			$.each(data, function() {
				$("#espacio").append($("<option />").val(this.id).text(this.nombre));
			});
			actualizar_mapa(map, marcador, $("#text"), btn_editar, btn_borrar);			
		});
		
		$("#espacio")
		.change(function(event){
			var id = event.currentTarget.value;
			for(var i=0; i<espacios.length; i++){
				if(espacios[i].id === id)
					espacio_seleccionado = i;
				}
			actualizar_mapa(map, marcador, $("#text"), btn_editar, btn_borrar);
			});
	});
	
	function actualizar_mapa(mapa, marcador, text, btn_editar, btn_borrar){
		var espacio = espacios[espacio_seleccionado];
		var pos = new google.maps.LatLng(
			espacio.latitud, 
			espacio.longitud);
		if(mapa == null){
			var options = {
				center: pos,
				zoom: 15
			};
			map = new google.maps.Map(divmapa, options);
		}else{
			mapa.setCenter(pos);
		}
		if(marcador == null){
			marcador = new google.maps.Marker({
				position: pos,
				map: map,
				title: espacio.nombre
			});
		}else{
			marcador.setPosition(pos);
			marcador.setTitle(espacio.nombre);
		}		
		$(text).text(espacio.direccion);
		$(btn_editar).attr("href","<?php echo base_url() ?>espacios/editar/" + espacio.id);
		$(btn_borrar).attr("href","<?php echo base_url() ?>espacios/borrar/" + espacio.id);
	}
	
</script>